<template>
  <div class="organization-dialog">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="组织名称" prop="name">
        <a-tree-select
          @select="selectChange"
          :dropdown-style="{ maxHeight: '230px', overflow: 'auto' }"
          placeholder="请选择组织名称"
          :tree-data="nameList"
          v-model="form.name"
          :replaceFields="replaceFields"
          search-placeholder="请选择父级节点"
          :getPopupContainer="triggerNode => {
            return triggerNode.parentNode || document.body;
          }"
        />
      </a-form-model-item>
      <a-form-model-item label="组织代码">
        <a-input v-model="form.code" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="父级节点">
        <a-tree-select
          :dropdown-style="{ maxHeight: '230px', overflow: 'auto' }"
          placeholder="请选择父级节点"
          :tree-data="dataList"
          v-model="form.parentId"
          :replaceFields="replaceFatherFields"
          search-placeholder="请选择父级节点"
          :getPopupContainer="triggerNode => {
            return triggerNode.parentNode || document.body;
          }"
        />
      </a-form-model-item>
      <a-form-model-item label="排序" prop="order">
        <a-input-number v-model="form.order" placeholder="请输入排序" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import dicService from '@/api/dicService'
import orupService from '@/api/orupService'
export default {
  name: 'OrganizationDialog',

  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      form: {
        name: undefined,
        order: 0,
        code: '',
        parentId: undefined
      },
      rules: {
        name: [{ required: true, message: '请选择组织', trigger: 'change' }],
        order: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },
      dataList: [],
      nameList: [],
      replaceFields: {
        key: 'id',
        title: 'name',
        value: 'name',
        children: 'children'
      },
      replaceFatherFields: {
        key: 'id',
        title: 'name',
        value: 'id',
        children: 'children'
      }
    }
  },

  props: {
    record: {
      type: Object,
      default: () => ({})
    }
  },

  created () {
    this.form = this._.cloneDeep(this.record)
  },

  mounted () {
    this.loadData()
  },

  methods: {
    async loadData () {
     this.nameList = await dicService.treeDicItemByDicName('浙江省行政区划（投资在线3.0）', '/')
     this.dataList = await orupService.orgManageTreeQuery({})
    },
    selectChange (value, node) {
      this.form.code = node.dataRef.value
    },
    onSubmit () {
      let isValid = ''
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
.organization-dialog {
  /deep/ .ant-input-number {
    width: 375px;
  }
}

</style>
